import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
import { Button, InputNumber, InputNumberProps } from 'antd';
import { useMemo } from 'react';

const NumberInput = (props: InputNumberProps<number>) => {
  const { value, onChange, min, max, style } = props;

  const val = useMemo(() => Number(value) || 0, [value]);

  return (
    <div className="flex items-center gap-1">
      <Button
        size="small"
        className="h-6 w-6 rounded-full"
        style={{ backgroundColor: 'var(--fill-1)', borderColor: 'var(--line-2)' }}
        icon={<MinusOutlined size={8} />}
        onClick={() => {
          if (val > (min ?? Number.NEGATIVE_INFINITY)) {
            onChange?.(val - 1);
          }
        }}
      />
      <InputNumber<number>
        style={{ borderColor: 'var(--line-2)', ...style }}
        value={val}
        onChange={onChange}
        {...props}
      />
      <Button
        size="small"
        className="h-6 w-6 rounded-full"
        style={{ backgroundColor: 'var(--fill-1)', borderColor: 'var(--line-2)' }}
        icon={<PlusOutlined />}
        onClick={() => {
          if (val < (max ?? Number.POSITIVE_INFINITY)) {
            onChange?.(val + 1);
          }
        }}
      />
    </div>
  );
};

export default NumberInput;
